import { ref } from 'vue';
import { getGlobalMap } from '@/components/GlobalMap';
import { addPointDataLayer } from 'gmap-ol';
import {PPIcon100, PPIcon10, PPIcon20, PPIcon5,PPIcon50} from '@/setting/imageEnum';

const globalMap = ref<any>(null);

// 添加需要的地图数据
export const addMapWarningData = async (warningData) => {
  globalMap.value = getGlobalMap();
  const levelData1:any = [], levelData2:any = [], levelData3:any = [], levelData4:any = [], levelData5:any = [];
  for (let i = 0; i < warningData.length; i++) {
    if (warningData[i].warnLevel == '1') {
      levelData1.push(warningData[i]);
    }
    if (warningData[i].warnLevel == '2') {
      levelData2.push(warningData[i]);
    }
    if (warningData[i].warnLevel == '3') {
      levelData3.push(warningData[i]);
    }
    if (warningData[i].warnLevel == '4') {
      levelData4.push(warningData[i]);
    }
    if (warningData[i].warnLevel == '5') {
      levelData5.push(warningData[i]);
    }
  }
  await addWarningData1(levelData1);
  await addWarningData2(levelData2);
  await addWarningData3(levelData3);
  await addWarningData4(levelData4);
  await addWarningData5(levelData5);
}

const addWarningData1 = (warningData) => {
  const pointOptions = {
    layerName: 'PP-level1-WarnLayer',
    className: 'stationWarningFlicker',
    icon: PPIcon100,
    zIndex: 1,
    visible: true,
    textFieldName: '', // stnm
    styles: {
      image: {
        scale: 1.5,
      },
      text: {
        fill: {
          color: 'rgba(76, 82, 70, 0.9)',
        },
        stroke: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.8)',
        },
        font: '11px sans-serif',
      },
    },
  };
  addPointDataLayer(globalMap.value, warningData, pointOptions);
}

const addWarningData2 = (warningData) => {
  const pointOptions = {
    layerName: 'PP-level2-WarnLayer',
    className: 'stationWarningFlicker',
    icon: PPIcon50,
    zIndex: 1,
    visible: true,
    textFieldName: '', // stnm
    styles: {
      image: {
        scale: 1.5,
      },
      text: {
        fill: {
          color: 'rgba(76, 82, 70, 0.9)',
        },
        stroke: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.8)',
        },
        font: '11px sans-serif',
      },
    },
  };
  addPointDataLayer(globalMap.value, warningData, pointOptions);
}

const addWarningData3 = (warningData) => {
  const pointOptions = {
    layerName: 'PP-level3-WarnLayer',
    className: 'stationWarningFlicker',
    icon: PPIcon20,
    zIndex: 1,
    visible: true,
    textFieldName: '', // stnm
    styles: {
      image: {
        scale: 1.5,
      },
      text: {
        fill: {
          color: 'rgba(76, 82, 70, 0.9)',
        },
        stroke: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.8)',
        },
        font: '11px sans-serif',
      },
    },
  };
  addPointDataLayer(globalMap.value, warningData, pointOptions);
}


const addWarningData4 = (warningData) => {
  const pointOptions = {
    layerName: 'PP-level4-WarnLayer',
    className: 'stationWarningFlicker',
    icon: PPIcon10,
    zIndex: 1,
    visible: true,
    textFieldName: '', // stnm
    styles: {
      image: {
        scale: 1.5,
      },
      text: {
        fill: {
          color: 'rgba(76, 82, 70, 0.9)',
        },
        stroke: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.8)',
        },
        font: '11px sans-serif',
      },
    },
  };
  addPointDataLayer(globalMap.value, warningData, pointOptions);
}


const addWarningData5 = (warningData) => {
  const pointOptions = {
    layerName: 'PP-level5-WarnLayer',
    className: 'stationWarningFlicker',
    icon: PPIcon5,
    zIndex: 1,
    visible: true,
    textFieldName: '', // stnm
    styles: {
      image: {
        scale: 1.5,
      },
      text: {
        fill: {
          color: 'rgba(76, 82, 70, 0.9)',
        },
        stroke: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.8)',
        },
        font: '11px sans-serif',
      },
    },
  };
  addPointDataLayer(globalMap.value, warningData, pointOptions);
}
